<template>
  <div class="comment">
    <div class="comment-headline">
      <h2>评论管理</h2>
      <el-button type="danger" size="small" @click="openMore()"
        >选择作品</el-button
      >
    </div>
    <div>
      <div class="comment-container">
        <div class="comment-video-left">
          <img :src="worksCommentInfo.coverPath" />
        </div>
        <div class="comment-video-right">
          <p class="comment-video-title">{{ worksCommentInfo.worksDesc }}</p>
          <p class="comment-video-time">
            发布于{{ worksCommentInfo.updateTime | formatDate }}
          </p>
        </div>
      </div>
      <h4 class="comment-box">评论管理</h4>
      <div class="coment-size">
        <div class="comment-size-left"><img :src="userInfo.avatar" /></div>
        <div class="comment-size-right">
          <div class="comment-textarea">
            <el-input
              type="textarea"
              autosize
              placeholder="有爱评论，说点儿好听的"
              v-model="commentContext"
            >
            </el-input>
          </div>
          <div class="word-footer">
            <span><i class="el-icon-s-custom"></i></span>
            <span
              ><el-button type="danger" size="small" @click="addComment(0, commentContext)"
                >发送</el-button
              ></span
            >
          </div>
        </div>
      </div>
      <div class="evaluate">
        <div>
          <el-select v-model="value" clearable placeholder="请选择排序方式">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div
          class="evaluate-message"
          v-for="(item1, index1) in commentList"
          :key="item1.commentId"
        >
          <div class="evaluate-left">
            <img :src="item1.commentAvatar" />
          </div>
          <div class="evaluate-right">
            <div class="evaluate-name">
              <h4>{{ item1.commentNickname }}</h4>
              <span v-if="item1.isOwner">{{
                item1.isOwner == 1 ? "作者" : ""
              }}</span>
            </div>
            <div class="evaluate-address">
              <p>{{ item1.commentIp }}</p>
              <p class="evaluate-time">{{ item1.createTime | formatDate }}</p>
            </div>
            <div class="evaluate-word">
              <p>
                {{ item1.commentContext }}
              </p>
            </div>
            <div class="evaluate-btn">
              <el-button
                type="text"
                class="like"
                @click="handlelikeCommentFun(item1.commentId, index1, -1)"
              >
                <i :class="['iconfont', item1.like ? 'active-like' : '']"
                  >&#xe600;</i
                ><span>{{ item1.likeCounts }}</span>
              </el-button>
              <el-button type="text" @click="replyParent(index1, -1)">
                <i class="iconfont">&#xe602;</i><span>回复</span></el-button
              >
              <el-button type="text" @click="deleteMessage()">
                <i class="iconfont">&#xe670;</i><span>删除</span></el-button
              >
            </div>
            <div class="reply-message" v-if="item1.inReply">
              <div class="reply-message-left">
                <img :src="userInfo.avatar" />
              </div>
              <div class="reply-message-right">
                <div>
                  <el-input
                    type="textarea"
                    autosize
                    :placeholder="'回复@' + item1.commentNickname"
                    v-model="item1.replyContext"
                  >
                  </el-input>
                </div>
                <div class="reply-footer">
                  <span><i class="el-icon-s-custom"></i></span>
                  <div class="reply-footer-btn">
                    <el-button
                      type="info"
                      size="small"
                      @click="replyParent(index1, -1)"
                      >取消</el-button
                    ><el-button type="danger" size="small" @click="addComment(item1.commentId, item1.replyContext)">发送</el-button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 1 -->
            <div
              class="evaluate-children"
              v-show="item1.inOpen"
              v-for="(item2, index2) in item1.replyComments"
              :key="item2.commentId"
            >
              <div class="evaluate-left">
                <img :src="item2.commentAvatar" />
              </div>
              <div class="evaluate-right">
                <div class="evaluate-name">
                  <h4>{{ item2.commentNickname }}</h4>
                  <div class="author-mark">
                    <span v-if="item2.isOwner">{{
                      item2.isOwner == 1 ? "作者" : ""
                    }}</span>
                    回复 {{ item2.parentComment.commentNickname }}
                  </div>
                </div>
                <div class="evaluate-address">
                  <p>{{ item2.commentIp }}</p>
                  <p class="evaluate-time">
                    {{ item2.createTime | formatDate }}
                  </p>
                </div>
                <div class="evaluate-word">
                  <p>
                    {{ item2.commentContext }}
                  </p>
                </div>
                <div class="evaluate-btn">
                  <el-button
                    type="text"
                    class="like"
                    @click="
                      handlelikeCommentFun(item2.commentId, index1, index2)
                    "
                  >
                    <i :class="['iconfont', item2.like ? 'active-like' : '']"
                      >&#xe600;</i
                    ><span>{{ item2.likeCounts }}</span>
                  </el-button>
                  <el-button type="text" @click="replyParent(index1, index2)">
                    <i class="iconfont">&#xe602;</i><span>回复</span></el-button
                  >
                  <el-button type="text" @click="deleteMessage()">
                    <i class="iconfont">&#xe670;</i><span>删除</span></el-button
                  >
                </div>
                <div class="reply-message" v-if="item2.inReply">
                  <div class="reply-message-left">
                    <img :src="userInfo.avatar" />
                  </div>
                  <div class="reply-message-right">
                    <div>
                      <el-input
                        type="textarea"
                        autosize
                        :placeholder="'回复@' + item2.commentNickname"
                        v-model="item2.replyContext"
                      >
                      </el-input>
                    </div>
                    <div class="reply-footer">
                      <span><i class="el-icon-s-custom"></i></span>
                      <div class="reply-footer-btn">
                        <el-button
                          type="info"
                          size="small"
                          @click="replyParent(index1, index2)"
                          >取消</el-button
                        ><el-button type="danger" size="small" @click="addComment(item2.commentId, item2.replyContext)">发送</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 1 -->
            <div v-if="item1.replyComments.length > 0" class="other-evaluate">
              <span class="boundary"></span>
              <div
                v-if="!item1.inOpen"
                @click="openMessage(index1)"
                class="expanded"
              >
                <el-button type="text"></el-button>展开{{
                  item1.replyComments.length
                }}条回复<i class="el-icon-arrow-down"></i>
              </div>
              <div v-else @click="closeMessage(index1)" class="closed">
                <el-button type="text"></el-button>收起回复<i
                  class="el-icon-arrow-up"
                ></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        append-to-body
      >
        <div class="delete-dialog">
          <i class="el-icon-warning"></i>
          <h3>是否删除此评论</h3>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="drawer-box">
      <el-drawer
        append-to-body
        :visible.sync="drawer"
        :with-header="false"
      >
        <div class="right-works">
          <div class="works-fixed">
            <div class="right-works-number">
              <h3>作品列表</h3>
              <span>共{{ commentWorksList.length }}个视频</span>
            </div>
          </div>
          <div class="right-works-box">
            <ul>
              <li
                v-for="item in commentWorksList"
                :key="item.worksId"
                @click="changeDrawer(item)"
              >
                <div class="works-box-left">
                  <img :src="item.coverPath" />
                </div>
                <div class="works-box-right">
                  <p class="works-box-title">
                    {{ item.worksDesc
                    }}<template v-for="topic in item.topicList">
                      #{{ topic.topicTitle }}</template
                    >
                  </p>
                  <div class="works-box-comment">
                    <div class="iconfont">&#xe602;</div>
                    <p>{{ item.commentCounts }}</p>
                  </div>
                  <p class="works-box-time">
                    发布于{{ item.updateTime | formatDate }}
                  </p>
                </div>
              </li>
              <div style="margin-top: 40px; text-align: center">
                <p style="color: #ababab">没有更多视频~</p>
              </div>
            </ul>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import "@/assets/icon/iconfont.css";
import {
  getCommentWorksListApi,
  getCommentListApi,
  handlelikeCommentApi,
  handleUnlikeCommentApi,
  addWorksCommentApi,
} from "@/api/commentManagement";
export default {
  data() {
    return {
      userInfo: this.$store.state.userInfo,
      worksId: 0,
      commentWorksList: [],
      commentList: [],
      worksCommentInfo: {},
      drawer: false,
      replyGrandstatus: false,
      moreReply: false,
      replyStatus: false,
      dialogVisible: false,
      options: [
        {
          value: "1",
          label: "按点赞量排序",
        },
        {
          value: "2",
          label: "按评论时间排序",
        },
      ],
      value: "",
      commentContext: "",
      replyWord: "",
    };
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy年MM月dd日 hh:mm");
    },
  },
  created() {
    this.getCommentWorksListFun();
    this.getCommentListFun();
  },
  methods: {
    addComment(parentId, commentContext) {
      addWorksCommentApi({
        userId: this.userInfo.userId,
        worksId: this.worksId,
        parentId: parentId,
        commentContext: commentContext,
      }).then((res) => {
        if (res.data.code == 200) {
          this.getCommentListFun();
          this.$message({
            type: "success",
            message: "评论成功",
          });
          this.commentContext = ""
        } else {
          this.$message({
            type: "info",
            message: "评论失败",
          });
        }
      });
    },
    handlelikeCommentFun(commentId, index1, index2) {
      if (index2 == -1) {
        if (this.commentList[index1].like) {
          // 取消点赞API
          handleUnlikeCommentApi({
            commentId: commentId,
            worksId: this.worksId,
            userId: this.userInfo.userId,
          }).then((res) => {
            if (res.data.code == 200) {
              this.commentList[index1].like = false;
            }
          });
        } else {
          // 点赞API
          handlelikeCommentApi({
            commentId: commentId,
            worksId: this.worksId,
            userId: this.userInfo.userId,
          }).then((res) => {
            if (res.data.code == 200) {
              this.commentList[index1].like = true;
            }
          });
        }
      } else {
        if (this.commentList[index1].replyComments[index2].like) {
          // 取消点赞API
          handleUnlikeCommentApi({
            commentId: commentId,
            worksId: this.worksId,
            userId: this.userInfo.userId,
          }).then((res) => {
            if (res.data.code == 200) {
              this.commentList[index1].replyComments[index2].like = false;
            }
          });
        } else {
          // 点赞API
          handlelikeCommentApi({
            commentId: commentId,
            worksId: this.worksId,
            userId: this.userInfo.userId,
          }).then((res) => {
            if (res.data.code == 200) {
              this.commentList[index1].replyComments[index2].like = true;
            }
          });
        }
      }
    },
    getCommentListFun() {
      getCommentListApi({
        worksId: this.worksId,
        page: 1,
        userId: this.userInfo.userId,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.commentList = res.data.data;
        }
      });
    },
    getCommentWorksListFun() {
      getCommentWorksListApi({ userId: this.userInfo.userId }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.commentWorksList = res.data.data;
          this.worksId = this.commentWorksList[0].worksId;
          this.worksCommentInfo = this.commentWorksList[0];
        }
      });
    },
    changeDrawer(item) {
      this.worksCommentInfo = item;
      this.worksId = item.worksId;
      this.getCommentListFun();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    openMore() {
      this.drawer = !this.drawer;
    },
    deleteMessage() {
      this.dialogVisible = true;
    },
    replyParent(index1, index2) {
      if (index2 == -1) {
        this.commentList[index1].inReply = !this.commentList[index1].inReply;
      } else {
        this.commentList[index1].replyComments[index2].inReply =
          !this.commentList[index1].replyComments[index2].inReply;
      }
    },
    replyGrand() {
      this.replyGrandstatus = !this.replyGrandstatus;
    },
    openMessage(index) {
      this.commentList[index].inOpen = true;
    },
    closeMessage(index) {
      this.commentList[index].inOpen = false;
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.comment {
  width: 96%;
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  margin: auto;
}

.right-works {
  height: 100%;
  top: 0;
  z-index: 999;
  overflow-y: scroll;
  padding: 0px 0px 20px 20px;
  box-sizing: border-box;
  position: absolute;
  background: #ffffff;
  box-shadow: -5px 0px 10px 2px #ebebeb;

  /* display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden; */
}
/* .right-works */

.right-works::-webkit-scrollbar {
  display: none;
}
.comment-headline {
  display: flex;
  justify-content: space-between;
}
.comment-container {
  display: flex;
  margin-top: 15px;
  padding: 10px 10px;
  background: #f8f8f8;
  box-sizing: border-box;
}

.comment-video-left img {
  width: 60px;
  height: 80px;
  border-radius: 8px;
}
.comment-video-right {
  margin-left: 10px;
}
.comment-video-title {
  font-size: 13px;
  color: #918f8f;
}
.comment-video-time {
  position: absolute;
  /* bottom: 175px; */
  top: 145px;
  font-size: 12px;
  color: #bcbcbc;
}
.comment-box {
  box-sizing: border-box;
  padding: 30px 0 10px 0;
  border-bottom: 1px solid #fcf9f9;
}
.word-footer {
  margin-top: 8px;
  justify-content: space-between;
  display: flex;
}
.coment-size {
  box-sizing: border-box;
  padding: 30px 0 15px 0;
  display: flex;
  border-bottom: 1px solid #eeeeee;
}
.comment-size-left img {
  width: 50px;
  height: 50px;
  border-radius: 90px;
}
.comment-size-right {
  margin-left: 10px;
  width: 95%;
}
.evaluate-message {
  display: flex;
  margin-top: 30px;
}
.evaluate-left img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.reply-message-left img {
  width: 30px;
  height: 30px;
  /* 
  border: 1px solid red; */
  border-radius: 50%;
}
.author-mark {
  font-size: 13px;
  color: #a7a7a7;
}
.evaluate-left {
}
.evaluate-right {
  width: 95%;
  margin-left: 10px;
}
.evaluate-name {
  display: flex;
  align-items: center;
}
.evaluate-name h4 {
  margin-right: 8px;
}
.evaluate-name span {
  padding: 2px 4px;
  background: #ed7b7b;
  color: #fff;
  font-size: 12px;
  margin-left: 2px;
  margin-right: 10px;
  font-family: fangsong;
  border-radius: 4px;
}
.boundary {
  width: 32px;
  height: 1px;
  display: inline-block;
  margin-right: 4px;
  background: rgba(22, 24, 35, 0.06);
}
.other-evaluate {
  display: flex;

  align-items: center;
  margin-top: 25px;
  cursor: pointer;
  font-size: 12px;
}
.evaluate-address {
  display: flex;
  font-size: 12px;
  color: #898989;
  margin: 4px 0 10px 0;
}
.evaluate {
  margin-top: 15px;
}
.evaluate-time {
  font-size: 12px;
  color: #898989;
  margin: 0 0 0 20px;
}
.evaluate-word p {
  font-size: 14px;
}
.evaluate-btn .el-button--text {
  color: #babbbd;
}
.evaluate-btn {
  margin: 6px 0;
  height: 20px;
  color: #babbbd;
  line-height: 20px;
}
.evaluate-btn i {
  font-size: 14px;
}
.evaluate-btn span {
  margin: 0 6px 0 3px;
  font-size: 12px;
}
.expanded,
.closed {
  color: #babbbd;
}
.evaluate-children {
  display: flex;
  margin-top: 20px;
  /* border: 1px solid red; */
}
.delete-dialog,
.reply-message {
  display: flex;
}
.delete-dialog i {
  color: #ff851d;
  font-size: 25px;
}
.delete-dialog h3 {
  margin-left: 10px;
}
.reply-message {
  margin-top: 15px;
}
.reply-message-right {
  width: 95%;
  margin-left: 10px;
}
.reply-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
/* .reply-footer-btn{
display: flex;
} */

.right-works-number {
  display: flex;
  justify-content: space-between;
}
.right-works-number span {
  color: #ababab;
  font-size: 14px;
  margin-right: 5px;
}
.right-works-box {
  margin-top: 50px;
}
.right-works-box ul li {
  display: flex;
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
  cursor: pointer;
}
.right-works-box ul li:hover {
  background: #f8f8f8;
}
.works-box-left img {
  width: 80px;
  height: 100px;
  border-radius: 2px;
}
.works-box-right {
  width: 70%;
  margin-left: 10px;
}
.works-box-title {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.works-box-time {
  font-size: 12px;
  color: #bcbcbc;
}
.works-box-comment {
  text-align: end;
  color: #ababab;
  font-size: 14px;
  margin: 10px -22px 0 0;
}
.works-fixed {
  height: 40px;
  width: 430px;
  line-height: 40px;
  position: fixed;
  background: #fff;
}
.comment-textarea .el-textarea__inner {
  background: #f4f5f5;
   resize: none;
}
.evaluate .el-select .el-input__inner {
  background-color: #f2f2f4;
  border: none;
}
.active-like {
  color: red;
}
</style>
